<script setup>
  import { ref, reactive, onMounted, computed } from 'vue';
  import { useBreadcrumbData } from '@/stores/breadcrumb'
  import { doPost } from '@/http/api'
  import { ElMessageBox } from 'element-plus'
  import { genFileId } from 'element-plus'
  
  // 面包屑数据
  const breadcrumbList = ref([
    {
      name: '首页',
      routeName: 'homeData'
    },
    {
      name: 'json操作',
      routeName: ''
    },
  ]);

  const breadcrumbDataStore = useBreadcrumbData();
  breadcrumbDataStore.setBreadcrumbData(breadcrumbList);

  const form = reactive({
    oldJson: "",
    ifFieldOrderd: false,
    ifFormatJson: false,
  })

  const endJson = ref("");

  const onSubmit = async () => {
    if (form.oldJson == "") {
      ElMessageBox.alert('请输入json串', '提示')
      return;
    }
    const data = {
      oldJson: form.oldJson,
      ifFieldOrderd: form.ifFieldOrderd,
      ifFormatJson: form.ifFormatJson,
    };
    doPost('/dataops/jsonOps', data).then(res => {
      endJson.value = res.endJson;
    })
  }

</script>

<template>
  <main class="main">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="原json串">
        <el-input style="height: 100px;" rows="4" type="textarea" v-model="form.oldJson" placeholder="请输入json"/>
      </el-form-item>
      <el-form-item label="是否排序（字段）">
        <el-switch v-model="form.ifFieldOrderd" />
      </el-form-item>
      <el-form-item label="是否格式化">
        <el-switch v-model="form.ifFormatJson" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="24">
        <el-input style="height: 400px;" rows="16" type="textarea" v-model="endJson"></el-input>
      </el-col>
    </el-row>
  </main>
</template>